<template>
    <div style="width: 100%; height: 100%" :style="canvasHeight">
        <component :is="componentName" :fileUrl="fileUrl" :fileType="fileType" :key="keyUUID"></component>
    </div>
</template>

<script setup>
import { ref, defineProps, markRaw, defineAsyncComponent } from 'vue';

import { useRoute } from 'vue-router';
import $modal from '@/plugins/modal';
const route = useRoute();
const componentName = ref(null);
const canvasHeight = ref('');
const props = defineProps({
    fileUrl: {
        type: String,
        default: ''
    },
    fileType: {
        type: String,
        default: ''
    }
});
const keyUUID = ref(null);
const fileUrl = ref('');
const fileType = ref('');
const handleFile = (url, name) => {
    fileUrl.value = url;
    fileType.value = name;
    // 根据扩展名判断并处理
    switch (name) {
        case 'doc':
        case 'docx':
            loadComponent('docx');
            break;
        case 'pdf':
            loadComponent('pdf');
            break;
        case 'xlsx':
        case 'xls':
            loadComponent('excel');
            break;
        case 'pptx':
            loadComponent('pptx');
            break;
        case 'jpg':
        case 'JPG':
        case 'png':
        case 'PNG':
        case 'gif':
            loadComponent('image');
            break;
        default:
            $modal.msgWarning('暂不支持该文件类型预览');
    }
};
const install = () => {
    // 通过路由访问
    if (route.path === '/office') {
        if (!route.query.fileUrl) return false;
        canvasHeight.value = 'height:100vh;';
        const extension = route.query.fileUrl.split('.').pop().toLowerCase();
        keyUUID.value = route.query.fileUrl;
        handleFile(route.query.fileUrl, extension);
    } else {
        // 通过组件加载方式访问
        if (!props.fileUrl) return false;
        if (props.fileType) {
            // 组件加载通过文件流展示时需要传递文件类型
            keyUUID.value = new Date().getTime();
            handleFile(props.fileUrl, props.fileType);
        } else {
            const extension = props.fileUrl.split('.').pop().toLowerCase();
            keyUUID.value = props.fileUrl;
            handleFile(props.fileUrl, extension);
        }
    }
};

const loadComponent = async (fileName) => {
 /*    componentName.value = markRaw(
        defineAsyncComponent(() => {
            return import(`@/components/Office/components/${fileName}.vue`);
        })
  ); */


  const component = await import(`@/components/Office/components/${fileName}.vue`);
    const rawComponent = markRaw(component.default);
    
    if (previewMode.value === 'inline') {
        componentName.value = rawComponent;
    } else if (previewMode.value === 'dialog') {
        // 使用弹窗方式预览
        $modal.component({
            title: '文件预览',
            width: '80%',
            component: rawComponent,
            componentProps: {
                fileUrl: fileUrl.value,
                fileType: fileType.value
            }
        });
    } else if (previewMode.value === 'window') {
        // 使用新窗口方式预览
        const features = 'width=1000,height=800,menubar=no,toolbar=no,location=no';
        const newWindow = window.open('', '_blank', features);
        
        // 创建一个简单的HTML页面来承载Vue组件
        newWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>文件预览</title>
                <link rel="stylesheet" href="/your-app-styles.css">
            </head>
            <body>
                <div id="app"></div>
                <script src="/your-app-vendor.js"><\/script>
                <script src="/your-app-main.js"><\/script>
            </body>
            </html>
        `);
        
        // 当新窗口加载完成后渲染组件
        newWindow.onload = () => {
            const app = newWindow.document.getElementById('app');
            // 这里需要根据你的Vue版本和构建方式调整
            // 如果是Vue 3，可以使用createApp和mount
            newWindow.createApp(rawComponent, {
                fileUrl: fileUrl.value,
                fileType: fileType.value
            }).mount(app);
        };
    }
};

install();

</script>

<style lang="scss" scoped></style>

